<template>
  <div class="container">
    <el-dialog
      title="添加盘点差异单"
      :visible.sync="superDialog.dialogVisible"
      width="300px"
      center
      @open="getDatas"
      @close="cancel"
    >
      <el-select
        size="small"
        v-model="purchase.value"
        :multiple="false"
        filterable
        remote
        center
        reserve-keyword
        placeholder="请选择仓库"
        :remote-method="insidePurchaseMethod"
        :loading="purchase.loading"
        @change="getPurchase(purchase.value)"
      >
        <el-option
          v-for="item in purchase.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-dialog
        title="添加盘点差异单"
        :visible.sync="dialogVisible"
        @open="getData"
        @close="cancel"
        append-to-body
        width="90%"
        center
      >
        <el-select
          style="margin: 10px 0"
          :multiple="false"
          filterable
          remote
          center
          reserve-keyword
          v-model="good_bar_code"
          placeholder="请搜索选择商品"
          :remote-method="insideRemoteMethod"
          :loading="inside.loading"
        >
          <el-option
            v-for="item in inside.option"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button
          class="add"
          icon="el-icon-circle-plus"
          size="small"
          type="primary"
          @click="goodsStock"
          >添加商品</el-button
        >
        <el-table
          :data="tableData"
          border
          max-height="500"
          style="width: 100%"
          empty-text="暂无数据"
        >
          <el-table-column
            prop="good_name"
            label="商品名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="good_code"
            label="商品编码"
            align="center"
          ></el-table-column>
          <el-table-column label="盘点入库价" align="center" width="150px">
            <template slot-scope="scope">
              <el-input
                v-if="scope.row.showPrice"
                size="small"
                v-model="scope.row.price"
                placeholder="请输入内容"
                @input="qtySum(scope)"
              ></el-input>
              <p v-else>{{ scope.row.price }}</p>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="price"
            label="盘点入库价"
            align="center"
          ></el-table-column> -->
          <el-table-column
            prop="class_name"
            label="分类名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="spec"
            label="规格"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="unit"
            label="单位"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="stock_num"
            label="系统库存数量"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="stock_qty"
            label="系统库存件数"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="rk_spec"
            label="入库规格"
            align="center"
          ></el-table-column>
          <el-table-column label="盘点数量" align="center" width="150px">
            <template slot-scope="scope">
              <el-input
                size="small"
                v-model="scope.row.stockNum"
                placeholder="请输入内容"
                @input="qtySum(scope)"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="stockQty"
            label="盘点箱数"
            align="center"
          ></el-table-column>
          <el-table-column label="配送中心" width="200px" align="center">
            <template slot-scope="scope">
              <el-select
                :multiple="false"
                filterable
                remote
                center
                reserve-keyword
                v-model="scope.row.dcname"
                placeholder="请搜索选择配送中心"
                :remote-method="selectListsRemoteMethod"
                :loading="selectLists.loading"
                @change="distribution(scope)"
              >
                <el-option
                  v-for="item in selectLists.option"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="150px">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="danger"
                @click="remove(scope)"
                icon="el-icon-delete"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="confirm()">确 定</el-button>
        </span>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirms">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  stockList,
  findGoodsStock,
  addTakestock,
} from "@/api/check/superCheck";
import { selectRdcData } from "@/api/select/select";
import { selectErpGoodsData } from "@/api/superOrder/superOrderList";
import { selectChooseWarehouse } from "@/api/commodity/commodityList"; //仓库
export default {
  props: {
    superDialog: Object,
  },
  data() {
    return {
      inside: {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false,
      },
      good_bar_code: "",
      tableData: [],
      purchase: {
        innerVisible: false,
        options: [],
        value: "",
        type: false,
        list: [],
        loading: false,
      },
      dialogVisible: false,
      warehouse: {
        warehouse_code: "",
        warehouse_name: "",
      },
      selectLists: {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false,
      },
      search: {
        selectnamecode: "",
      },
    };
  },
  created() {},
  methods: {
    getDatas() {
      //获取仓库列表
      let data = {
        page: 1,
        limit: 100,
      };
      selectChooseWarehouse(data).then((res) => {
        this.purchase.options = res.data.data.map((item) => {
          return {
            value: `${item.house_code}`,
            label: `${item.house_name}`,
          };
        });
      });
    },
    // 嵌套搜索仓库数据
    insidePurchaseMethod(query) {
      if (query !== "") {
        this.getPurchaseList(query);
      } else {
        this.purchase.options = [];
      }
    },
    getPurchaseList(query) {
      let data = {
        name: query,
        page: 1,
        limit: 100,
      };
      this.purchase.loading = true;
      selectChooseWarehouse(data).then((res) => {
        this.purchase.list = res.data.data.map((item) => {
          return {
            value: `${item.house_code}`,
            label: `${item.house_name}`,
          };
        });
        this.purchase.loading = false;
        this.purchase.options = this.purchase.list.filter((item) => {
          return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        });
      });
    },
    getPurchase(e) {
      let data = this.purchase.options.filter((res) => {
        return res.value == e;
      });
      this.warehouse = {
        warehouse_code: data[0].value,
        warehouse_name: data[0].label,
      };
      this.getselsetData();
    },
    confirms() {
      this.dialogVisible = true;
    },
    //关闭
    cancel() {
      this.tableData = [];
      this.inside = {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false,
      };
      this.good_bar_code = "";
      this.superDialog.dialogVisible = false;
      this.purchase = {
        innerVisible: false,
        options: [],
        value: "",
        type: false,
        list: [],
        loading: false,
      };
      this.dialogVisible = false;
      this.warehouse = {
        warehouse_code: "",
        warehouse_name: "",
      };
    },
    // 获取数据
    getData(goods_code = "") {
      let data = {
        page: 1,
        limit: 500,
        goods_code: goods_code,
        warehouse_code: this.warehouse.warehouse_code,
        warehouse_name: this.warehouse.warehouse_name,
      };
      //获取商品
      selectErpGoodsData(data).then((res) => {
        this.goodsList = res.data.paginate.data;
        if (res.data.paginate.data) {
          this.inside.option = res.data.paginate.data.map((item) => {
            return { value: `${item.Code}`, label: `${item.Name}` };
          });
        }
      });
    },
    // 获取商品方法
    insideRemoteMethod(query) {
      if (query !== "") {
        this.getSupplierList(query);
      } else {
        this.inside.options = [];
      }
    },
    //获取商品数据
    getSupplierList(query) {
      this.getData(query);
    },
    goodsStock() {
      let data = {
        good_code: this.good_bar_code,
        warehouse_code: this.warehouse.warehouse_code,
      };
      findGoodsStock(data).then((res) => {
        res.data.forEach((item) => {
          item.stockNum = 0;
          item.stockQty = 0;
          item.id = item.good_code + item.rk_spec;
          if (this.tableData.length > 0) {
            let bool = this.tableData.filter((center) => {
              return center.id == item.id;
            });
            if (bool.length > 0) {
              // this.$message({
              //   type: "info",
              //   message: "该商品或者该同规格商品已添加",
              // });
            } else {
              this.tableData.push(item);
            }
          } else {
            this.tableData.push(item);
          }
        });
      });
    },
    //计算盘点箱数
    qtySum(scope) {
      scope.row.stockQty = (scope.row.stockNum / scope.row.rk_spec).toFixed(4);
      if (parseFloat(scope.row.stockNum) > parseFloat(scope.row.stock_num)) {
        this.tableData[scope.$index].showPrice = true;
      } else {
        this.tableData[scope.$index].showPrice = false;
      }
      this.$set(this.tableData, scope.$index, scope.row);
    },
    //删除
    remove(scope) {
      let id = scope.row.id;
      this.tableData.forEach((res, index) => {
        if (res.id == id) {
          this.tableData.splice(index, 1);
        }
      });
    },
    distribution(scope) {
      let arr = this.selectLists.option.filter((res) => {
        return res.value == scope.row.dcname;
      });
      scope.row.dccode = arr[0].value;
      scope.row.dcname = arr[0].label;
    },
    getselsetData() {
      let data = {
        page: 1,
        limit: 500,
        code_or_name: this.search.selectnamecode,
        warehouse_code: this.warehouse.warehouse_code,
      };
      //获取配送中心
      selectRdcData(data).then((res) => {
        if (res.data.paginate.data) {
          this.selectLists.option = res.data.paginate.data.map((item) => {
            return {
              value: `${item.d_code}`,
              label: `${item.d_name}`,
              warehouse_code: `${item.warehouse_code}`,
            };
          });
        }
      });
    },
    // 嵌套搜索配送方式数据
    selectListsRemoteMethod(query) {
      if (query !== "") {
        this.houseList(query);
      } else {
        this.selectLists.option = [];
      }
    },
    //获取配送数据
    houseList(query) {
      this.search.selectnamecode = query;
      this.getselsetData();
    },
    //确定
    confirm() {
      if (this.tableData.length != 0) {
        let bool = false;
        let dBool = false;
        this.tableData.forEach((res) => {
          if (parseFloat(res.stockNum) == parseFloat(res.stock_num)) {
            bool = true;
          }
          if (!res.dcname) {
            dBool = true;
          }
        });
        if (bool) {
          this.$message({
            type: "info",
            message: "盘点数量和系统库存数量相等，请重新填写盘点数量",
          });
          return false;
        }
         if (dBool) {
          this.$message({
            type: "info",
            message: "配送中心不能为空",
          });
          return false;
        }
        let arrList = [];
        this.tableData.forEach((res) => {
          arrList.push({
            good_code: res.good_code,
            good_bar_code: res.good_bar_code,
            good_name: res.good_name,
            rk_spec: res.rk_spec,
            before_stock_num: res.stock_num,
            stock_num: res.stockNum,
            before_stock_qty: res.stock_qty,
            stock_qty: res.stockQty,
            price: res.price,
            unit: res.unit,
            spec: res.spec,
            class_code: res.class_code,
            class_name: res.class_name,
            dccode: res.dccode,
            dcname: res.dcname,
          });
        });
        let data = {
          good_data: JSON.stringify(arrList),
          warehouse_code: this.warehouse.warehouse_code,
          warehouse_name: this.warehouse.warehouse_name,
        };
        addTakestock(data).then((res) => {
          if (res.code == 0) {
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.$emit("upData");
            this.cancel();
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
      } else {
        this.$message({
          type: "info",
          message: "请添加商品",
        });
      }
    },
  },
};
</script>
<style scoped>
.pagination {
  text-align: right;
  padding: 10px;
  background-size: cover;
}
.title {
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  font-weight: bold;
}
</style>
